<template>
  <view >
    <u-navbar title="医院统计" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />
    <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
      <view class="h-80 flex align-center p-lr-30 bg-fff oh">
        <view class="max-w-163 oh" v-if="isAdminRole">
          <DropDownSelect placeholder="选择医院" :defaultKeyValue="queryParams.hospitalId" :list="hospitalOption" valueKey="hospitalId" @confirm="hospitalConfirm" />
        </view>
        <view class="max-w-163 oh">
          <DropDownSelect placeholder="选择科室" :list="departmentOption" valueKey="departmentId" @confirm="departmentConfirm" />
        </view>
        <!-- <view class="max-w-163 oh" v-if="!isAdminRole">
          <DropDownSelect placeholder="选择公司" :list="companyOption" valueKey="hospitalId" @confirm="companyConfirm" />
        </view> -->
        <view class="flex align-center justify-end flex1">
          <DateTimePicker @unitChange="unitChange" @dateChange="dateChange" :disableUnitType="['day']" />
        </view>
      </view>
    </view>

    <view class="m-lr-20 pb-50 oys">
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" @tap.stop="toOrderDetail(item.date)"
        v-for="(item, index) in statisticsList" :key="index">
        <view class="flex align-center justify-between">
          <text class="fz-36 font-bold">{{ item.date }}</text>
          <image class="w-14 h-28 ml-20 min-w-14" src="@/static/images/common/toPath.png"></image>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">巡检应完成数量：{{ item.inspect.total }}</view>
          <view class="flex1">完成次数：{{ item.inspect.finishTotal }}</view>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">保养应完成数量：{{ item.maintenance.total }}</view>
          <view class="flex1">完成次数：{{ item.maintenance.finishTotal }}</view>
        </view>
        <view class="flex align-center justify-between mt-18 text-left">
          <view class="flex1">维修应完成数量：{{ item.repair.total }}</view>
          <view class="flex1">完成次数：{{ item.repair.finishTotal }}</view>
        </view>
      </view>
    </view>

    <EmptyIcon v-if="!loading && statisticsList.length === 0" />

  </view>
</template>

<script>
import DropDownSelect from "./components/dropDownSelect"
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DateTimePicker from "./components/dateTimePicker";

import { optionDepartment } from "@/api/hospital/department"
import { optionHospitalForCompany } from "@/api/hospital/hospital"
import { getStatisticsList } from "@/api/statistics/hospital"
import getNavBarHeight from "@/mixins/getNavBarHeight";

import {DIC} from "@/utils/dict"

export default {
  name: "HospitalStatistics",
  mixins: [getNavBarHeight],
  components: { EmptyIcon, DropDownSelect, DateTimePicker },
  created () {
    this.queryParams.year = new Date().getFullYear()
    const companyId = this.$store.getters.companyId !== -1 ? this.$store.getters.companyId : ""
    if (this.$auth.hasRoleOr(['co-admin','admin'])) {
      this.isAdminRole = true
      this.queryParams.companyId = companyId
      this.init()
    } else if (this.$auth.hasRole('manager')) {
      this.isAdminRole = false
      this.queryParams.hospitalId = this.$store.getters.curHospitalId !== -1 ? this.$store.getters.curHospitalId : ""
      this.queryParams.companyId = companyId
      this.getDepartmentOption()
    }else {
      this.init()
    }
    this.getHospitalOption()
  },
  data () {
    return {
      hospitalOption: [],
      departmentOption: [],
      companyOption: [],
      queryParams: {
        hospitalId: '',
        departmentId: '',
        companyId: '',
        pageNum: 1,
        pageSize: 10,
        year: '',
        month: '',
        day: '',
        week: '',
        unitType: 0,
      },
      hasNext: true,
      statisticsList: [],
      loading: true,
      //是否是管理员角色
      isAdminRole: false,
    }
  },
  onReachBottom () {
    if (!this.loading && this.hasNext) {
      this.getNextList()
    }
  },
  watch:{
    'queryParams.hospitalId':function(val){
      this.init()
    }
  },
  methods: {
    init () {
      this.queryParams.pageNum = 1
      this.loading = true
      getStatisticsList(this.queryParams).then(res => {
        this.statisticsList = res.rows || []
        this.hasNext = res.hasNext
      }).finally(() => this.loading = false)
    },
    getNextList () {
      this.loading = true
      const params = {...this.queryParams, pageNum:this.queryParams.pageNum+1}
      getStatisticsList(params).then(res => {
        this.queryParams.pageNum++
        this.statisticsList = this.statisticsList.concat(res.rows)
        this.hasNext = res.hasNext
      }).finally(() => {
        this.loading = false
      })
    },
    //根据公司ID查医院--管理员角色
    getHospitalOption () {
      optionHospitalForCompany(this.queryParams.companyId).then(res=>{
        const option = res.data
        this.hospitalOption = option
        if(!this.queryParams.hospitalId && option && option.length >0){
          this.queryParams.hospitalId = option[0]?.hospitalId
        }
      })
    },
    getCompanyOption () {
      this.companyOption = []
    },
    //医院变化-科室改变
    getDepartmentOption () {
      this.departmentOption = []
      optionDepartment({hospitalId: this.queryParams.hospitalId,companyId:this.queryParams.companyId}).then(res => {
        this.departmentOption = res.data
      })
    },
    //医院选择回调
    hospitalConfirm (id) {
      this.queryParams.departmentId = ''
      this.queryParams.hospitalId = id
      this.getDepartmentOption()
    },
    // companyConfirm (id) {
    //   this.queryParams.companyId = id
    // },
    //科室选择回调
    departmentConfirm (id) {
      this.queryParams.departmentId = id
      this.init()
    },
    toOrderDetail (date) {
      const dateList = date.split("-")
      const hospitalName = this.hospitalOption.find(el=>el.hospitalId===this.queryParams.hospitalId)?.name
      const departmentName = this.departmentOption.find(el=>el.departmentId===this.queryParams.departmentId)?.name
      const params = {
        hospitalId: this.queryParams.hospitalId,
        departmentId: this.queryParams.departmentId,
        hospitalName,
        departmentName,
        year: dateList[0] || '',
      }
      if( this.queryParams.unitType === DIC.dateType[2].value){
        params.month = dateList[1] || ''
        params.day = dateList[2] || ''
        params.week = this.queryParams.week
        params.unitType = DIC.dateType[3].value
      }else{
        params.month = dateList[1] || ''
        params.day = dateList[2] || ''
        if( this.queryParams.unitType === DIC.dateType[0].value){
          params.unitType = DIC.dateType[1].value
        }else if( this.queryParams.unitType === DIC.dateType[1].value){
          params.unitType = DIC.dateType[3].value
        }
      }
      this.$tab.navigateTo(`/pages/statistics/hospital-order-detail?queryParams=${encodeURIComponent(JSON.stringify(params))}`)
    },
    //日期单位变更
    unitChange (unit) {
      this.queryParams.unitType = unit
      // this.init()
    },
    //日期变更
    dateChange (dateObj) {
      this.queryParams.year = dateObj.year
      this.queryParams.month = dateObj.month
      this.queryParams.day = dateObj.day
      this.queryParams.week = dateObj.week
      this.init()
    },
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
</style>
